<template>
	<view>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">
			<view class="bg-linear-gradient" style="padding-top: 15px;">
				<view class="p-2 ">
					<u-swiper height="300" :list="list"></u-swiper>
				</view>
			</view>
			<u-notice-bar style="border: 1px solid #8ED0F2; margin: 10px;" color="#8ED0F2" bg-color="#fff"
				border-radius="10" :more-icon="true" class="pl-2 pr-2" mode="vertical" :is-circular="false"
				:list="notices" @click="gitMin('/pages/tabbar/index/NewList')"></u-notice-bar>

			<view class="dfex pl-2 pr-2 mt-6">
				<view style="text-align: center;" v-for="(item, index) in CatList" :key="index"
					@click="open(item.url, item.name)">
					<i v-if="item.icon" class="text-white bg-FFC251 p-2 font rounded-circle  iconfont"
						v-html="item.icon"></i>
					<view class="mt-4 font-14" style="lineHights">{{item.name}}</view>
				</view>
			</view>

			<view class="dfex pt-5 pl-2 pr-2 pb-6">
				<view @click="gitMin('/pages/tabbar/index/ProductLaunch')"
					class="bg-white boxShadow p-2 col-46-5 rounded-10">
					<text class="font-weight-bolder font-16 text-FFC251">产品上市简报</text>
					<view class="pt-4 dfex">
						<text>简报管理</text>
						<i class="iconfont icon-a-huaban1fuben4 text-FFC251 font-38"></i>
					</view>
				</view>
				<view @click="gitMin('/pages/tabbar/index/prediction')"
					class="bg-white boxShadow p-2 col-46-5 rounded-10">
					<text class="font-weight-bolder font-16 text-FFC251">产品上市预报</text>
					<view class="pt-4 dfex">
						<text>预报管理</text>
						<i class="iconfont icon-yubaoguanli text-FFC251 font-38"></i>
					</view>
				</view>
			</view>
			<!-- <u-gap height="20" bg-color="#f7f7f7"></u-gap> -->
			<!-- 涉农申报列表 -->
			<view class="p-2" style="display: none;">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">涉农申报列表</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/Agriculture')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class=" mt-5">
					<view class="dfex u-line  pb-2 mb-2" v-for="(item, index) in nenoList" :key="index"
						@click="gitMin('/pages/tabbar/index/AgricultureDetails')">
						<view>
							<text class="text-333333 font-14">{{item.title}}</text>
							<text v-if="item.name != '报名中'"
								class="bg-CECECE  ml-2 p rounded font-12 text-A0A0A0">{{item.name}}</text>
							<text v-else class="bg-FFC251 ml-2 p rounded font-12 text-white">{{item.name}}</text>
							<view class="mt-2 lineHights font-12 text-999999">
								<view>开始时间：{{item.kaisTiem}}</view>
								<view>结束时间：{{item.jshuTiem}}</view>
							</view>
						</view>
						<view v-if="item.annt != '查看报名详情'"
							class="bg-CECECE pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{item.annt}}</view>
						<view v-else class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{item.annt}}
						</view>
					</view>
				</view>
			</view>

			<!-- 政策资讯 -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">政策资讯</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/policy')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class=" mt-5">
					<view class="dfel u-line  pb-2 mb-2" v-for="(item, index) in newlist.slice(0, 3)" :key="index"
						@click="openPolicyDetails(item.id)">
						<view>
							<view  class="text-333333 font-15 wraps">{{item.title}}</view>

							<view class="mt-2 lineHights font-12 text-999999">
								<view>来源：{{item.source}}</view>
								<view>时间：{{item.updateTime.slice(0, 10)}}</view>
							</view>
						</view>
						<view v-if="item.cover" class="p-1">
							<u-lazy-load
							style="width: 145px;  height: 95px; border-radius:5px"
								:image="getFullImageUrl(item.cover)"></u-lazy-load>
						</view>
						<view v-else>
							<u-lazy-load
							style="width: 145px; height: 95px; border-radius:5px"
							v-if="item.cover"
								:image="getFullImageUrl(item.cover)" ></u-lazy-load>
						</view>
					</view>
				</view>
			</view>
			<!-- 列表  -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">

				<!-- Tab bar -->
				<view class="dfex">
					<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="currentTab = index"
						:class="{ 'active': currentTab === index }">
						{{ tab }}
					</view>
				</view>

				<!-- Tab content -->
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌积分榜'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/pointsTable')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '黑名单'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/blacklist')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌执法'">
					<text class="font-14 text-999999"
						@click="gitMin('/pages/tabbar/index/brandEnforcement')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view class="mt-3">
					<template v-if="currentTab === 0">
						<view class="dfex" v-for="(item, itemIndex) in brandPointsList.slice(0, 3)" :key="itemIndex">
							<view class="dfes">
								<view
									:class="['pr-2 font-20', {'index-color-1': (itemIndex % 3) === 0 && itemIndex < 3, 'index-color-2': (itemIndex % 3) === 1 && itemIndex < 3, 'index-color-3': (itemIndex % 3) === 2 && itemIndex < 3, 'font-color-gray': itemIndex >= 3 }]">
									{{ itemIndex + 1 }}
								</view>
								<u-image style="width: 35px; height: 35px; margin-top: 10rpx;" border-radius= "100rpx" :src="getFullImageUrl(item.avatar)" ></u-image >
								<view class="ml-2 font-14 text-333333 wrap">{{item.enterpriseName}}</view>
							</view>
							<view class="text-78AB06 font-16">{{item.totalIntegral}} 积分</view>
						</view>
					</template>
					<template v-if="currentTab === 1">
						<view v-for="(item, itemIndex) in tabContents.slice(0, 3)" :key="itemIndex">
							<view class="u-line pb-2" @click="openlist(item.id)">
								<view class="dfex pt-1">
									<view class="font-15 wrap">{{item.enterpriseName}}</view>
									<view class="text-999999 font-12">{{item.updateTime.slice(0, 10)}}</view>
								</view>
								<view class="mt-2 text-999999 font-14 wrapsa">{{item.enterprisesReason}}</view>
							</view>
						</view>
						<view v-if="tabContents.length === 0" class="text-center text-999999 font-16">
							<view class="iconfont icon-zanwushuju font-48 pb-1"></view>
							<view>暂无数据</view>
						</view>
					</template>
					<template v-if="currentTab === 2">
						<view v-for="(item, itemIndex) in tabContentsList.slice(0, 3)" :key="itemIndex">
							<view class="u-line pb-2 mt-1" @click="openlis(item.id)">
								<view class="dfex pt-1">
									<view class="wrap font-15 wrap">{{item.enterpriseName}}</view>
									<view class="text-999999 font-12">{{item.createTime.slice(0, 10)}}</view>
								</view>
								<view class="mt-2 text-999999 font-14 wrapsa">{{item.enforcementInstructions}}</view>
							</view>
						</view>
						<view v-if="tabContentsList.length === 0" class="text-center text-999999 font-16">
							<view class="iconfont icon-zanwushuju font-48 pb-1"></view>
							<view>暂无数据</view>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				list: [
					'/static/no.png',
				],
				notices: [],
				CatList: [{
						icon: '&#xe606;',
						name: '上游商城',
						url: '/pages/tabbar/index/UpstreamMall',
						tabIndex: 0,
					},
					{
						icon: '&#xe618;',
						name: '下游商城',
						url: '/pages/tabbar/index/DownstreamMall',
						tabIndex: 1,
					},
					{
						icon: '&#xe650;',
						name: '政策查询',
						url: '/pages/tabbar/index/policy',
					},
					{
						icon: '&#xe636;',
						name: '产品管理',
						url: '/pages/tabbar/user/product',
					}
				],

				nenoList: [{
						title: '涉农申报业务标题',
						name: '报名中',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '查看报名详情',
					},
					{
						title: '涉农申报业务标题1',
						name: '已结束',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '停止报名',
					}
				],
				newlist: [],
				tabs: ['品牌积分榜', '黑名单', '品牌执法'],
				currentTab: 0,
				tabContents: [],
				tabContentsList: [],
				brandPointsList: [],

			}
		},
		onLoad() {
			this.NewList();
			this.lists();
			this.blackList();
			this.brandList();
			this.brandPoints();
		},
		computed: {
			currentTabContent() {
				return this.tabContents[this.currentTab];
			}
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			open(url) {
				uni.navigateTo({
					url
				})
			},
			gitMin(url) {
				uni.navigateTo({
					url
				})
			},
			// 政策
			NewList() {
				$H.get('/basisInform/policyRelease/agriculture/list', {}, {}).then(res => {
					this.newlist = res.result.records
				}).catch(error => {
					console.log(error)
				});
			},
			openPolicyDetails(id) {
				// 跳转到详情页，并传递id参数
				uni.navigateTo({
					url: `/pages/tabbar/index/policyDetails?id=${id}`
				});
			},
			// 广告
			lists() {
				$H.get('/basisInform/platformNotice/agriculture/list', {}, {}).then(res => {
					this.notices = res.result.records.map(item => item.title);
				}).catch(error => {
					cosnole.log(error)
				});
			},

			//黑名单 
			blackList() {
				$H.get('/agriculture/blacklist/list', {}, {}).then(res => {
					this.tabContents = res.result.records
				}).catch(error => {
					console.log(error)
				});
			},
			openlist(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/blacklistDi?id=${id}`
				})
			},

			// 品牌执法
			brandList() {
				$H.get('/agriculture/brandEnforcement/list', {}).then(res => {
					this.tabContentsList = res.result.records
				}).catch(error => {
					console.log(error)
				});
			},
			// 品牌积分榜
			brandPoints() {
				$H.get('/basisInform/integral/agriculture/queryIntegralStandingsPageList', {}).then(res => {
					this.brandPointsList = res.result.records
				}).catch(error => {
					console.log(error)
				});
			},
			openlis(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/brandEnforcementDi?id=${id}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #FFC251;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #FFC251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #FF0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #FFC251;
	}
	.lazy-load img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover; /* 或者其他你需要的填充方式，比如 contain */
	  }
</style>